<template>
  <view class="purse">
    <view class="purse_box">
      <image class="money_bg" :src="BaseUrl + '/static/common/baobg.png'" mode="widthFix" />
      <view class="title">
        <view class="text">
          <text>可提现金额（元）</text>
          <image
            @click="show = !show"
            class="icon"
            :src="show ? BaseUrl + '/static/common/zyan.png' : BaseUrl + '/static/common/byan.png'"
            mode="scaleToFill"
          />
        </view>
        <button class="btn" @click="recharge">充值</button>
        <button class="btn" @click="cash">提现</button>
      </view>
      <view class="money">
        <input v-show="show" style="height: 60rpx" type="text" v-model="money" disabled />
        <input v-show="!show" style="height: 60rpx" type="password" v-model="money" disabled />
      </view>
    </view>
    <view class="center_view">
      <view class="date" @click="showDate = true">
        <text style="margin-right: 10rpx">{{ date ? date : "选择日期" }}</text>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="showDetails">
        <text>收入￥{{ revenue ? revenue : 0 }}</text>
        <text>支出￥{{ expenditure ? expenditure : 0 }}</text>
      </view>
    </view>
    <view class="card">
      <u-tabs
        ref="uTabs"
        :list="list"
        :current="current"
        active-color="#057748"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs>
      <swiper :current="current" @change="changeSwiper">
        <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
          <scroll-view scroll-y style="width: 100%" @scrolltolower="onreachBottom">
            <view class="item" v-for="(item, index) in cashList" :key="index">
              <view class="info_box">
                <image
                  :src="BaseUrl + item.image"
                  class="avatar"
                  style="border-radius: 50%"
                  mode="scaleToFill"
                />
                <view class="info">
                  <view class="title">{{ item.memo }}</view>
                  <view class="date">{{ item.createtime_text }}</view>
                </view>
              </view>

              <text :style="{ color: item.isRevenue ? '#EB5C20' : '#888888' }"
                >{{ item.money }}
              </text>
            </view>
            <u-empty text="暂无数据" v-if="cashList.length == 0" mode="list"></u-empty>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-calendar v-model="showDate" mode="date" @change="change"></u-calendar>
  </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
  data() {
    return {
      BaseUrl: BaseUrl,
      show: true,
      showDate: false,
      money: "",
      date: "",
      revenue: 0,
      expenditure: 0,
      list: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "收入",
        },
        {
          id: 3,
          name: "支出",
        },
      ],
      current: 0,
      cashList: [],
      datax: "",
    };
  },

  onShow() {
    this.getMoney();
    this.getList();
  },

  methods: {
    // 时间转成
    formatDate(timestamp) {
      const date = new Date(timestamp * 1000); // 注意：JavaScript中的时间戳是以毫秒为单位的，所以需要乘以1000
      // const formattedTime = date.toLocaleString('zh-CN', { hour12: false });
      var year = date.getUTCFullYear();
      var month = String(date.getUTCMonth() + 1).padStart(2, "0");
      var day = String(date.getUTCDate()).padStart(2, "0");
      var hour = String(date.getUTCHours()).padStart(2, "0");
      var minute = String(date.getUTCMinutes()).padStart(2, "0");
      var second = String(date.getUTCSeconds()).padStart(2, "0");
      return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
      // return formattedTime;
    },
    // 获取钱包列表
    getList() {
      this.$request
        .post("api/wanlshop.pay/moneyLog", {
          type: this.type,
        })
        .then((res) => {
          // res.data.data.forEach((item) => {

          // });
          this.revenue = res.data.add_all;
          this.expenditure = res.data.xf_all;
          this.cashList = res.data.data;
        });
    },
    // 获取钱包金额
    getMoney() {
      this.$request.post("api/wanlshop.pay/getBalance").then((res) => {
        this.money = res.data;
      });
    },

    cash() {
      uni.navigateTo({
        url: "/liu/pages/cash/withdraw",
      });
    },
    recharge() {
      console.log("充值");
      uni.navigateTo({
        url: "/liu/pages/cash/recharge",
      })
    },
    change(val) {
      console.log(val);
      this.date = val.result.replace(/-/g, "/");
      this.datax = val.result.replace(/-/g, "/") + "-" + val.result.replace(/-/g, "/");
      this.cashList = [];
      this.$request
        .post("api/wanlshop.pay/moneyLog", {
          date: this.datax,
        })
        .then((res) => {
          res.data.data.forEach((item) => {
            this.revenue += item.revenue;
            this.expenditure += item.expenditure;
          });
          this.cashList = res.data.data;
        });
    },
    tabsChange(index) {
      this.datax = "";
      this.current = index;
      console.log(this.current);
      this.cashList = [];
      this.type = index;
      this.getList();
    },
    changeSwiper(e) {
      this.data = "";
      this.current = e.detail.current;
      // this.getList();
      this.cashList = [];
      this.type = e.detail.current;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
swiper {
  height: 60vh;
}

.swiper-item {
  overflow: auto;
}

.purse {
  .purse_box {
    width: 90%;
    height: 270rpx;
    margin: 0 auto;
    position: relative;

    // background-image: url("https://same.ascetic.top/static/common/baobg.png");
    .money_bg {
      width: 100%;
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
    }

    .title {
      color: #fff;
      position: absolute;
      top: 40rpx;
      left: 5%;
      width: 90%;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        display: flex;
        align-items: center;

        .icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .btn {
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        background: linear-gradient(90deg, #00a579, #057849);
        color: #fff;
      }
    }

    .money {
      position: absolute;
      top: 50%;
      left: 5%;
      width: 90%;
      z-index: 3;
      color: #fff;
      font-size: 60rpx;
    }
  }

  .center_view {
    width: 90%;
    margin: 30rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date {
      display: flex;
      align-items: center;

      .u-icon {
        margin-left: 10rpx;
      }
    }

    .showDetails {
      display: flex;
      color: #888;
      font-size: 24rpx;

      text {
        margin-left: 20rpx;
      }
    }
  }

  .card {
    width: 90%;
    margin: 20rpx auto;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;

      .info_box {
        display: flex;
        align-items: center;

        image {
          width: 80rpx;
          height: 80rpx;
        }

        .info {
          margin-left: 20rpx;

          .title {
            font-weight: bold;
            font-size: 28rpx;
            line-height: 1.8em;
          }

          .date {
            font-size: 24rpx;
            color: #888;
          }
        }
      }
    }

    .item:last-child {
      border-bottom: none;
    }
  }
}
</style>
